<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>CET-6</title>
    <link href="../static/css/styles.css" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
</head>

<body class="bg-primary">
    <div id="layoutAuthentication">
        <div id="layoutAuthentication_content">
            <main>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-7">
                            <div class="card shadow-lg border-0 rounded-lg mt-5">
                                <div class="card-header">
                                    <h3 class="text-center font-weight-light my-4">注册</h3>
                                </div>
                                <div class="card-body">
                                    <form  method="post">
                                        <div class="form-floating mb-3">
                                            <input class="form-control" id="inputUserName" type="text" name="userName"
                                                placeholder="Enter your first name" />
                                            <label for="inputUserName">用户名</label>
                                        </div>
                                        <div class="form-floating mb-3">
                                            <input class="form-control" id="inputEmail" type="email" name="email"
                                                placeholder="name@example.com" />
                                            <label for="inputEmail">邮箱</label>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="form-floating mb-3 mb-md-0">
                                                    <input class="form-control" id="inputPassword" type="password"
                                                        name="passWord" placeholder="Create a password"
                                                        onkeyup="checkpassword()" />
                                                    <label for="inputPassword">密码</label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-floating mb-3 mb-md-0">
                                                    <input class="form-control" id="inputPasswordConfirm"
                                                        type="password" placeholder="Confirm password"
                                                        onkeyup="checkpassword()" />
                                                    <label for="inputPasswordConfirm">确认密码</label>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-warning" id="tip"></p>
                                        <div class="form-floating mb-3">
                                            <input class="form-control" id="name" type="text" name="trueName"
                                                placeholder="True Name" />
                                            <label for="name">姓名</label>
                                        </div>
                                        <div class="form-floating mb-3">
                                            <input class="form-control" id="phone" type="tel" name="phone"
                                                placeholder="Phone Number" />
                                            <label for="phone">电话</label>
                                        </div>
                                        <div class="container text-center mb-3">
                                            <label for="userType">人员类型</label>
                                            <select class="selectpicker" data-style="btn-primary" id="userType"
                                                name="userType" onchange="changeForm()">
                                                <option value="student">学生</option>
                                                <option value="teacher">老师</option>
                                                <option value="worker">职工</option>
                                            </select>
                                        </div>
                                        <div id="student-form">
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="school" type="text" name="school"
                                                    placeholder="School" />
                                                <label for="school">学校</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="schoolId" type="text" name="schoolId"
                                                    placeholder="School Id" />
                                                <label for="schoolId">学号</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="yard" type="text" name="yard"
                                                    placeholder="Yard" />
                                                <label for="yard">学院</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="major" type="text" name="major"
                                                    placeholder="Major" />
                                                <label for="major">专业</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inSchoolTime" type="text"
                                                    name="inSchoolTime" placeholder="In School Time" />
                                                <label for="inSchoolTime">入学时间</label>
                                            </div>
                                        </div>
                                        <div id="teacher-form" style="display:none">
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="tschool" type="text" name="tSchool"
                                                    placeholder="School" />
                                                <label for="tschool">学校</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="teachId" type="text" name="teachId"
                                                    placeholder="Teach Id" />
                                                <label for="teachId">工号</label>
                                            </div>
                                        </div>
                                        <div id="worker-form" style="display:none">
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="workId" type="text" name="workId"
                                                    placeholder="Work Id" />
                                                <label for="workId">工号</label>
                                            </div>
                                        </div>
                                        <div class="mt-4 mb-0">
                                            <div class="d-grid"><input class="btn btn-primary btn-block" type="submit"
                                                    id="submit" value="注册"></div>
                                        </div>
                                    </form>
                                </div>
                                <div class="card-footer text-center py-3">
                                    <div class="small"><a href={{url_for("auth.login")}}>已有账号？登录</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <div id="layoutAuthentication_footer">
            <footer class="py-4 bg-light mt-auto">
                <div class="container-fluid px-4">
                    <div class="d-flex align-items-center justify-content-between small">
                        <div class="text-muted">Copyright &copy; OUR TEAM</div>
                        <div>
                            <a href="#">Privacy Policy</a>
                            &middot;
                            <a href="#">Terms &amp; Conditions</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script type="text/javascript">
        function checkpassword() {
            var password = document.getElementById("inputPassword").value;
            var repassword = document.getElementById("inputPasswordConfirm").value;
            if (password == repassword) {
                document.getElementById("tip").innerHTML = "";
                document.getElementById("submit").disabled = false;
            } else {
                document.getElementById("tip").innerHTML = "两次输入密码不一致!";
                document.getElementById("submit").disabled = true;
            }
        }
    </script>
    <script type="text/javascript">
        function changeForm() {
            var selectTable = document.getElementById("userType");
            var index = selectTable.selectedIndex;
            var stuForm = document.getElementById("student-form");
            var teaForm = document.getElementById("teacher-form");
            var worForm = document.getElementById("worker-form");
            stuForm.style.display = 'none';
            teaForm.style.display = 'none';
            worForm.style.display = 'none';
            if (index == 0) { // 学生
                stuForm.style.display = 'block';
            }
            else if (index == 1) { // 教师
                teaForm.style.display = 'block';
            }
            else { // 职工
                worForm.style.display = 'block';
            }
        }
    </script>
</body>

</html>